<template>
    <div class="container">
        <!--图片-->
        <ul class="images">
            <li v-for="img in imgList" :key="img.id">
                <img :src="img.path" alt="">
            </li>
        </ul>
        <!--底部图片-->
        <img src="@/assets/img/pic5.png" alt="" width="1920" height="54" class="img-bottom">
        <!-- 按钮 -->
        <ul class="button">
            <li v-for="it in imgList" :key="it.id"></li>
        </ul>
    </div>
</template>

<script>
    import $ from 'jquery'
    export default {
        name: "SliderImage",
        data() {
            return {
                imgList: [
                    {id: 1, path: require("@/assets/img/pic1.png")},
                    {id: 2, path: require("@/assets/img/pic2.png")},
                    {id: 3, path: require("@/assets/img/pic3.png")},
                    {id: 4, path: require("@/assets/img/pic4.png")}
                ]
            }
        },
        setup() {
            //入口函数
            $(() => {
                //获取当前展示图片索引
                let index = 0;
                //获取图片li元素
                let lis = $(".images").children()
                let btns = $(".button").children()
                let len = lis.length
                $(lis[index]).fadeIn(1000)
                $(btns[index]).css("backgroundColor", "white")
                //鼠标点击按钮切换图片
                for (let i = 0; i < len; i++) {
                    $(btns[i]).click(() => {
                        $(btns[index]).css("backgroundColor", "transparent")
                        $(lis[index]).fadeOut(1000)
                        index = i;
                        $(lis[index]).fadeIn(1000)
                        $(btns[index]).css("backgroundColor", "white")
                    })
                }
            })
        },
    }
</script>

<style scoped lang="less">
    /*容器样式*/
    .container {
        position: relative;
        width: 1920px;
        height: 720px;
        margin: 0px auto;
        overflow: hidden;
    }

    /*去掉list默认样式*/
    li {
        list-style: none;
    }

    .img-bottom {
        position: absolute;
        bottom: -2px
    }

    /*图片无序列表的样式*/
    .images {
        margin: 0px auto;
        position: relative;

        li {
            position: absolute;
            height: 720px;
            width: 1920px;
            margin: 0;
            z-index: 0;
            display: none;
        }

        li img {
            width: 1920px;
            height: 720px;
            cursor: pointer;
        }

    }

    /*按钮无序列表的样式*/
    .button {
        position: absolute;
        left: 850px;
        top: 650px;
        z-index: 5;

        li {
            height: 10px;
            width: 10px;
            border-radius: 10px;
            margin: 10px 10px;
            cursor: pointer;
            display: inline-block;
            background-color: transparent;
            border: 2px solid whitesmoke;
        }
    }


</style>